/**
 * @Name:  NestRoute
 * @Author:
 * @Desc:  嵌套路由
 * @Date: 2020-12-07 10:10:01
 */

import React, { Component } from "react";
// import { Route, Switch, Redirect } from "react-router-dom";
import { objectToSearch } from "@/utils";

const list = [
  {
    title: "按时间暗黑世界大会12",
    id: "1",
    content:
      " 自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《MangaTime Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。"
  },
  {
    title: "按时间暗黑世界大会2",
    id: "2",
    content:
      " 自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《MangaTime Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。"
  },
  {
    title: "按时间暗黑世界大会323",
    id: "3",
    content:
      "自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《MangaTime Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。"
  },
  {
    title: "按时间暗黑世界大会we",
    id: "4",
    content:
      "自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《MangaTime Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。"
  },
  {
    title: "按时间暗黑世界大会sd",
    id: "5",
    content:
      "自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《MangaTime Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。"
  },
  {
    title: "按时间暗黑世界大会sdc",
    id: "6",
    content:
      "自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《MangaTime Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。"
  },
  {
    title: "按时间暗黑世界大会45",
    id: "7",
    content:
      "自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《MangaTime Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。"
  }
];
class NestRoute extends Component {
  state = {
    id: ""
  };
  /**
   * @name pathChange
   * @description 点击跳转路由
   */
  pathChange = (v) => {
    this.setState({ id: v.title }, () => {
      this.next(v);
    });
  };
  next = (v) => {
    const search = objectToSearch({
      title: v.title,
      content: v.content
    });
    this.props.history.push(`/nest-route/:${v.id}` + search);
  };
  render() {
    return (
      <div>
        <h1>嵌套路由</h1>
        {list.map((v) => (
          <p key={v.title} onClick={() => this.pathChange(v)}>
            {v.title}
          </p>
        ))}
      </div>
    );
  }
}
export default NestRoute;
